import { Button, Flex, Form, Input, message, Modal, Space, Switch, Table, TimePicker } from "antd";
import { useState } from "react";
import { TableProps } from 'antd/lib';
import style from '../css/Timeperiodsetting.module.scss'
function Timeperiodsetting() {
    const [formOne] = Form.useForm();
    // 表格数据
    interface DataType {
        key: string;
        period: string;
        name: string;
        start: string;
        end: string;
        status: boolean
    }
    const dataSource = [
        {
            key: '1',
            period: 'SW001',
            name: '上午',
            start: '08:00',
            end: '12:00',
            status: true,
        },
        {
            key: '2',
            period: 'XW001',
            name: '下午',
            start: '14:00',
            end: '18:00',
            status: true,
        },
        {
            key: '3',
            period: 'WS001',
            name: '晚上',
            start: '19:00',
            end: '22:00',
            status: false,
        },
    ];

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '序号',
            dataIndex: '', // 不绑定到具体数据字段
            key: 'index',
            render: (_: any, __: any, index: number) => index + 1, // 从1开始计数
            width: '121px', // 可选：设置列宽
        },
        {
            title: '时段编码',
            dataIndex: 'period',
            key: 'period',
            width: '121px'
        },
        {
            title: '时段名称',
            dataIndex: 'name',
            key: 'name',
            width: '167px'
        },
        {
            title: '开始时段',
            dataIndex: 'start',
            key: 'start',
            width: '189px'
        },
        {
            title: '结束时段',
            dataIndex: 'end',
            key: 'end',
            width: '189px'
        },
        {
            title: '状态',
            key: 'status',
            render: (record: { status: boolean | undefined; key: any; }) => (
                <Switch
                    checked={record.status}
                    onChange={(checked) => handleSwitchChange(record.key, checked)}
                />
            ),
            width: '153px'
        },
        {
            title: '操作',
            key: 'action',
            render: (_: any,) => (
                <Space size="middle">
                    <a onClick={()=>edit()}>编辑</a>
                    <a onClick={()=>del()}>删除</a>
                </Space>
            ),
            width: '153px'
        },
    ];
    const [data, setData] = useState(dataSource);

    const handleSwitchChange = (key: string, checked: boolean) => {
        const newData = data.map((item) => {
            if (item.key === key) {
                return { ...item, status: checked };
            }
            return item;
        });
        setData(newData);
        console.log(newData, 111)
    };
    // 新增时段
    const insert=()=>{
        console.log('新增时段')
        setPeriodtime(true)
    }
    // 编辑
    const edit=()=>{
        console.log('编辑')
        setPeriodtime(true)
    }
    // 删除
    const [delloading,setDelloading] = useState(false)
    const [delshow,setDelshow] = useState(false)
    const del=()=>{
        console.log('删除')
        setDelshow(true)
    }
    // 确认删除
    const confirmOk=()=>{
        console.log('确认删除')
        setDelloading(true)
        setTimeout(() => {
            setDelloading(false)
            setDelshow(false)
            message.success(`删除操作成功！`);
        }, 2000);
    }
    // 取消删除
    const confirmCancel=()=>{
        console.log('取消删除')
        message.warning(`已取消操作！`);
        setDelshow(false)
    }
    // 新增时段对话框
    const [periodtime,setPeriodtime] = useState(false)
    const [periodtimeloading,setPeriodtimeloading] = useState(false)
    const format = 'HH:mm';     //时间选择格式
    // 新增时段取消
    const periodtimeCancel=()=>{
        console.log('取消')
        setPeriodtime(false)
        message.warning(`已取消操作！`);
        formOne.resetFields()
    }
    // 新增时段确定
    const periodtimeOk=()=>{
        setPeriodtimeloading(true)
        setTimeout(() => {
            setPeriodtimeloading(false)
            formOne.validateFields().then(values => {
                console.log('Validated values: ', values);
                message.success(`新增时段操作成功！`);
                console.log('确认')
                setPeriodtime(false)
                formOne.resetFields()
            }).catch(info => {
                console.log('Validate Failed:', info);
            });
        }, 2000);
    }
    return (
        <>
            {/* 新增时段对话框 */}
            <Modal
                title='新增时段'
                open={periodtime}
                width={347}
                onCancel={periodtimeCancel}
                footer={[
                    <Flex key='flex' justify='flex-end'>
                        <Button key="back" onClick={periodtimeCancel} style={{ height: 32, marginRight: 10 }}>
                            取消
                        </Button>,
                        <Button key="submit" type="primary" loading={periodtimeloading} onClick={periodtimeOk} style={{ height: 32 }}>
                            确认
                        </Button>,
                    </Flex>
                ]}
            >
                
                    <Form
                        form={formOne}
                    >
                        <Form.Item label='时段编码' rules={[{required:true}]} className={style.itemstyle} name='modaldepart' >
                            <Input style={{width:229,height:32}}></Input>
                        </Form.Item>
                        <Form.Item label='时段名称' rules={[{required:true}]} className={style.itemstyle} name='modaldoctor' >
                            <Input style={{width:229,height:32}}></Input>
                        </Form.Item>
                        <Form.Item label='开始时段' rules={[{required:true}]} className={style.itemstyle} name='starttime' >
                            <TimePicker style={{width:229,height:32}}  format={format} />
                        </Form.Item>
                        <Form.Item label='结束时段' rules={[{required:true}]} className={style.itemstyle} name='endtime'>
                            <TimePicker style={{width:229,height:32}}  format={format} />
                        </Form.Item>
                        <Form.Item label='状态' name='status' className={style.itemstyle}>
                            <Switch  />
                        </Form.Item>
                    </Form>
            </Modal> 
            {/* 删除对话框 */}
            <Modal
                title={
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E8%AE%BE%E8%AE%A1%E7%BB%84%E4%BB%B6/u268.svg" alt="" />
                        <span style={{ marginLeft: 5 }}>删除确认</span>
                    </div>
                }
                open={delshow}
                onOk={confirmOk} 
                onCancel={confirmCancel}
                footer={[
                    <Flex key='flex' justify='flex-end'>
                        <Button key="back" onClick={confirmCancel} style={{ height: 32, marginRight: 10 }}>
                            取消
                        </Button>,
                        <Button key="submit" type="primary" loading={delloading} onClick={confirmOk} style={{ height: 32 }}>
                            确认
                        </Button>,
                    </Flex>
                ]}
            >
                <p className={style.confirm}>是否继续操作删除时段操作？</p>
            </Modal>
            <Button type="primary" style={{ borderRadius: 0, width: 89, height: 32, marginBottom: 10 }} onClick={()=>insert()}>新增时段</Button>
            <Table pagination={false} dataSource={data} columns={columns} />
        </>
    );
}

export default Timeperiodsetting;